<script setup lang="ts">
import {onMounted, ref} from "vue";
import {queryPurchase,deletePurchase,exportPurchase,auditPurchase} from "@/api/purchase/purchase";
import {ElMessage, ElMessageBox} from "element-plus";
import host from "@/utils/env";
import {useRouter} from 'vue-router'
import {getUser} from "@/utils/session";

const tableData = ref([])
const page = ref(1);//默认第一页
const pageSize = ref(10);//每页显示条数
const total = ref(0);//总条数
/**
 * 分页
 * @param pg 第几页
 */
function chgpg(pg) {
  page.value = pg;
  initData();
}

const adstatusOptions = [
  {
    value: '1',
    label: '未审核',
  },
  {
    value: '2',
    label: '已审核',
  }, {
    value: "3",
    label: "已拒绝"
  }]
const statusOptions = [
  {
    value: '1',
    label: '待付款',
  },
  {
    value: '2',
    label: '部分付款',
  }, {
    value: "3",
    label: "已付款"
  }]
//条件
const filters = ref({
  name: "",
  auditStatus: "",
  status: "",
  billDate: "",
  eid:getUser().eid
})

/**
 * 采购单列表
 */
function initData() {
  if (filters.value.billDate == null) {
    filters.value.billDate = ""
  }
  let data = {
    "page": page.value,
    "pageSize": pageSize.value,
    "name": filters.value.name,
    "auditStatus": filters.value.auditStatus,
    "status": filters.value.status,
    "begin": filters.value.billDate[0],
    "end": filters.value.billDate[1],
    "eid":filters.value.eid
  }
  queryPurchase(data)
    .then(res => {
      if (res.code == 200) {
        tableData.value = res.data.list
        page.value = res.data.page
        pageSize.value = res.data.pageSize
        total.value = res.data.total
      }
    })
}
function deletePur(row) {
  let data = row.id
  ElMessageBox.confirm(
    '确认删除该企业信息吗，删除后该企业的所有数据将无法恢复！',
    '企业删除确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      if (data.length==0){
        ElMessage({
          type: 'warning',
          message: '请选择要删除的采购单',
        })
        return
      }
      let res = await deletePurchase(data)
      initData()
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      }
    })
    .catch(() => {

    })
}


/**
 * 分页
 * @param pgSize 每页多少条
 */
function chg(pgSize) {
  pageSize.value = pgSize;
  page.value = 1;
  initData();
}

//批量删除
let rmData = []

function removeId(ids) {
  let data = [];
  for (let i = 0; i < ids.length; i++) {
    data.push(ids[i].id)
  }
  rmData = data
}

function removeById() {
  ElMessageBox.confirm(
    '确认删除该企业信息吗，删除后该企业的所有数据将无法恢复！',
    '企业删除确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      if (rmData.length==0){
        ElMessage({
          type: 'warning',
          message: '请选择要删除的采购单',
        })
        return
      }
      let res = await deletePurchase(rmData)
      initData()
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      }
    })
    .catch(() => {

    })
}
//导出采购单
async function exExcel(){
  let res = await exportPurchase({})
  if (res.code == 200) {
    let url = host + res.data;
    window.open(url)
  }
}
//审核采购单
function auditPur(){
  ElMessageBox.confirm(
    '确认审核该采购单吗？',
    '采购单审核确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      let data={
        "id":rmData,
        "auditStatus":2,
        "auditor":getUser().username
      }
      if (rmData.length==0){
        ElMessage({
          type: 'warning',
          message: '请选择要审核的采购单',
        })
        return
      }
      let res = await auditPurchase(data)
      initData()
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: '审核成功',
        })


      }
    })
}
function NoauditPur() {
  let data = {
    "id": rmData,
    "auditStatus": 3,
    "auditor":getUser().username
  }
  ElMessageBox.confirm(
    '确认拒绝该采购单吗？',
    '采购单审核确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      if (rmData.length == 0) {
        ElMessage({
          type: 'warning',
          message: '请选择要审核的采购单',
        })
        return
      }
      let res = await auditPurchase(data)
      initData()
      if (res.code == 200) {
        ElMessage({
          type: 'success',
          message: '审核成功',
        })
      }
    })
}
//新增路由跳转
const router = useRouter();
function savePur(){
  router.push({path:"/purchase/save"})
}
//编辑路由跳转
function edit(id){
  router.push("/purchase/edit/"+id)
}
let user = {}
onMounted(() => {
  initData()
  user = getUser()
})
</script>

<template>
  <div>
    <!--  采购列表  -->
    <div
      style="width: 100%;height: 40px; border: #E4E4E4 solid 2px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
      <span style="font-size: 12px;margin-left: 20px;">筛选查询</span>
    </div>
    <div style="background-color: #FFFFFF"><br>
      <div style="margin-left: 40px;margin-top: -15px;height: 40px">
        <el-input v-model="filters.name" style="width: 240px" placeholder="请输入单据号或供应商或备注"/>
        <span style="margin-left: 80px">状态:</span>
        <div style="margin-left: 250px;margin-top: -32px">
          <el-select v-model="filters.auditStatus" clearable placeholder="审单状态" style="width: 120px">
            <el-option v-for="item in adstatusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          <el-select v-model="filters.status" clearable placeholder="付款状态" style="width: 120px;margin-left: 10px">
            <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
          &nbsp;&nbsp;&nbsp;日期：
          <el-date-picker v-model="filters.billDate" type="daterange" range-separator="To" start-placeholder="开始时间"
            end-placeholder="结束时间" value-format="YYYY-MM-DD" />
          <el-button style="margin-left: 20px" @click="initData()">查询结果</el-button>
        </div>
      </div>
    </div>

    <div>
      <div
        style="width: 100%;height: 40px; border: #E4E4E4 solid 2px;margin-top: 10px;padding: 5px;background-color: #F3F3F3">
        <span style="font-size: 12px;margin-left: 20px">数据列表</span>
        <!--工具条-->
        <div class="toolbar">
          <el-button type="primary" size="small" style="background-color: #60BFAE;border: #60BFAE"
            @click="savePur">新增采购单</el-button>
          <el-button type="primary" size="small" @click="exExcel">导出</el-button>
          <el-button type="primary" size="small">打印</el-button>
          <el-button type="primary" size="small" @click="removeById">删除</el-button>
          <el-button type="primary" size="small" @click="auditPur">审核</el-button>
          <el-button type="primary" size="small" @click="NoauditPur">反审核</el-button>
        </div>
      </div>
    </div>
    <!-- 数据列表 -->
    <el-table :data="tableData" style="width: 100%" border stripe @selection-change="removeId">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="billDate" label="单据日期" width="100" header-align="center" align="center" />
      <el-table-column prop="code" label="单据编号" width="140" header-align="center" align="center" />
      <el-table-column prop="supplierName" label="供应商" width="120" header-align="center" align="center" />
      <el-table-column prop="price" label="购货金额" width="120" header-align="center" align="center" />
      <el-table-column prop="money" label="优惠后金额" width="120" header-align="center" align="center" />
      <el-table-column prop="pay" label="已付款" width="120" header-align="center" align="center" />
      <el-table-column prop="status" label="付款状态" width="120" header-align="center" align="center">
        <template v-slot="o">
          <span v-if="o.row.status==1">待付款</span>
          <span v-if="o.row.status==2">部分付款</span>
          <span v-if="o.row.status==3">已付款</span>
        </template>
      </el-table-column>
      <el-table-column prop="prepared" label="制单人" width="120" header-align="center" align="center" />
      <el-table-column prop="auditor" label="审核人" width="120" header-align="center" align="center" />
      <el-table-column label="操作" header-align="center" align="center">
        <template v-slot="{row}">
          <span class="btn" @click="edit(row.id)">编辑</span>
          <span class="btn" @click="deletePur(row)">删除</span>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin:40px auto; width: 500px;">
      <el-pagination background @current-change="chgpg" @size-change="chg" :page-size="pageSize"
        :page-sizes="[10,20,30,40,50,100]" layout="total,sizes,prev, pager, next,jumper" :total="total" />
    </div>
  </div>
</template>

<style scoped>
.btn {
  color: #3399FF;
  margin-left: 10px;
  cursor: pointer;
}

.toolbar {
  float: right;
}
</style>
